<template>
  <div class="recharge-record">
    <div class="page-header">
      <i class="el-icon-wallet"></i>
      <span>充值记录</span>
    </div>

    <div class="search-bar">
      <el-input
        v-model="searchQuery"
        placeholder="请输入订单号/客户姓名/手机号进行搜索"
        class="search-input"
        clearable
        prefix-icon="el-icon-search"
        @clear="handleSearch"
        @keyup.enter.native="handleSearch"
      >
      </el-input>
      <div class="button-group">
        <el-button type="primary" icon="el-icon-refresh" @click="handleSearch">查询刷新</el-button>
        <el-button type="success" icon="el-icon-download" @click="handleExport">导出</el-button>
      </div>
    </div>

    <el-table
      v-loading="loading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="orderNumber" label="订单号" min-width="120" align="center"></el-table-column>
      <el-table-column prop="customerName" label="客户姓名" min-width="120" align="center"></el-table-column>
      <el-table-column prop="phoneNumber" label="联系电话" min-width="120" align="center"></el-table-column>
      <el-table-column prop="customerId" label="客户编号" min-width="120" align="center"></el-table-column>
      <el-table-column prop="cardId" label="充值卡号" min-width="120" align="center"></el-table-column>
      <el-table-column label="充值金额" min-width="120" align="center">
        <template slot-scope="scope">
          ¥ {{ scope.row.amount.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="paymentMethod" label="支付方式" min-width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.paymentMethod === 'WeChat Pay' ? '微信支付' :
             scope.row.paymentMethod === 'Alipay' ? '支付宝' :
             scope.row.paymentMethod === 'Bank Transfer' ? '银行转账' :
             scope.row.paymentMethod === 'PayPal' ? 'PayPal' :
             scope.row.paymentMethod === 'Credit Card' ? '信用卡' : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag type="success" size="small">成功</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RechargeRecord',
  data() {
    return {
      searchQuery: '',
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      selectedRows: []
    }
  },
  methods: {
    loadData() {
      this.loading = true;
      this.$axios.get('/api/recharge/list', {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.searchQuery ? this.searchQuery.trim() : null
        }
      })
      .then(response => {
        if (response.data.code === 200) {
          this.tableData = response.data.data;
          this.total = response.data.total || this.tableData.length;
        } else {
          this.$message.error(response.data.msg || '获取充值记录失败');
        }
      })
      .catch(error => {
        console.error('获取充值记录失败:', error);
        this.$message.error('获取充值记录失败，请稍后重试');
      })
      .finally(() => {
        this.loading = false;
      });
    },

    handleSearch() {
      this.currentPage = 1;
      this.loadData();
    },

    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },

    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.currentPage = 1;
      this.loadData();
    },

    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.loadData();
    },

    handleView(row) {
      console.log('查看充值详情:', row);
    },

    handleExport() {
      this.$confirm('确认导出充值记录数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '正在导出数据，请稍候...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        this.$axios({
          url: '/api/recharge/export',
          method: 'post',
          params: { 
            keyword: this.searchQuery || '' 
          },
          responseType: 'blob',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        }).then(response => {
          const blob = new Blob([response.data], { 
            type: 'application/vnd.ms-excel' 
          });
          
          const link = document.createElement('a');
          const fileName = `充值记录_${new Date().getTime()}.xlsx`;
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          
          document.body.appendChild(link);
          link.click();
          
          window.URL.revokeObjectURL(link.href);
          document.body.removeChild(link);
          
          this.$message.success('导出成功');
        }).catch(error => {
          console.error('导出失败:', error);
          this.$message.error('导出失败，请稍后重试');
        }).finally(() => {
          loading.close();
        });
      }).catch(() => {});
    }
  },
  created() {
    this.loadData();
  }
}
</script>

<style scoped>
.recharge-record {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.page-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.page-header i {
  font-size: 24px;
  margin-right: 10px;
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.search-inputs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}

.search-input {
  width: 200px;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-left: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-table) {
  margin-top: 15px;
}

:deep(.el-button--text) {
  padding: 0 8px;
}

:deep(.el-button--text + .el-button--text) {
  margin-left: 0;
}

:deep(.el-tag) {
  text-transform: uppercase;
}

</style>
